<template>
  <page-wrap
    back
    title="创建面试"
    hide-tab
    stayStill
    :hideSafeArea="true"
    :bg-color="uNavColor"
  >
    <InterViewNavbg />
    <view class="content">
      <view class="font-bold">面试标题</view>
      <u-input
        v-model="info.interviewTitle"
        :type="text"
        :maxlength="30"
        :clearable="false"
        :focus="true"
      />
      <u-line color="#e4e7ed" />

      <view class="font-bold">面试职业</view>
      <!-- <u-input v-model="info.ylPositionName" placeholder="点击选择面试职业" :type="select" @click="clickCareer" /> -->
      <view class="labelText" v-if="info.ylPositionName" @click="clickCareer">{{
        info.ylPositionName
      }}</view>
      <view class="labelText-gray" v-else @click="clickCareer"
        >点击选择面试职业</view
      >
      <u-line color="#e4e7ed" />

      <view class="font-bold">面试题库</view>
      <!-- <u-input v-model="info.questions.title" placeholder="点击选择面试题库" :type="select" @click="choiceQuestions" /> -->
      <view
        class="labelText"
        v-if="info.questions.title"
        @click="choiceQuestions"
        >{{ info.questions.title }}</view
      >
      <view class="labelText-gray" v-else @click="choiceQuestions"
        >点击选择面试题库</view
      >
      <u-line color="#e4e7ed" />

      <view class="font-bold">面试时间</view>
      <view class="dateContent">
        <view
          :class="['date', { dateOn: info.validStartTime.length > 4 }]"
          @click="clickDateBegin"
          >{{ info.validStartTime }}</view
        >
        <view class="line"> --- </view>
        <view
          :class="['date', { dateOn: info.validEndTime.length > 4 }]"
          @click="clickDateEnd"
          >{{ info.validEndTime }}</view
        >
      </view>
      <u-line color="#e4e7ed" />
      <view class="tips">注：若不在面试时间内，面试者无法进行面试</view>
      <u-button class="tool" shape="circle" type="warning" @click="handleNext"
        >完成</u-button
      >
    </view>

    <!-- 时间选择 -->
    <u-picker
      mode="time"
      v-model="showPicker"
      :params="pickerParams"
      @confirm="handleConfirm($event)"
    ></u-picker>
  </page-wrap>
</template>

<script>
import InterViewNavbg from "./components/InterViewNavbg.vue";
import { getCompanyInterviewCreate } from "@/api/modules/company";
export default {
  components: {
    InterViewNavbg,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      isCopy: false,
      info: {
        id: "",
        title: "",
        career: {
          // ylPositionId: 1233,
          // ylPositionName: "java",
        },
        validStartTime: "起始时间",
        validStartTimestamp: "",
        validEndTime: "结束时间",
        validEndTimestamp: "",
        questions: {
          title: "",
          topicId: "",
        },
      },
      showCareer: false,
      showPicker: false,
      pickerParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        // second: true,
        timestamp: true,
      },
      beginPicker: 0,
    };
  },

  created() {},
  onLoad(options) {
    if (options && options.copyData) {
      const data = JSON.parse(options.copyData);
      console.log("🚀 ~ file: interviewCreate.vue:68 ~ onLoad ~ data:", data);
      this.info = data;
      this.info.career = {
        ylPositionId: this.info.ylPositionId,
        ylPositionName: this.info.ylPositionName,
      };
      this.info.questions = {
        title: data.repoTitle,
        topicId: data.repoId,
      };
      this.info.validStartTime = data.validStartTime.substring(
        0,
        data.validStartTime.length - 3
      );
      this.info.validEndTime = data.validEndTime.substring(
        0,
        data.validEndTime.length - 3
      );

      this.isCopy = true;
    }
  },

  onShow() {
    const pages = getCurrentPages();
    const currPage = pages[pages.length - 1];
    let value = currPage.data.resultData;
    if (value && value.ylPositionId != this.info.career.ylPositionId) {
      this.isCopy = false;
      this.info.career = value;
      this.info.ylPositionName = value.ylPositionName;
      this.info.questions = { title: "", topicId: "" };
    }
    let questions = currPage.data.questions;
    if (questions) {
      this.info.questions = questions;
      currPage.data.questions = undefined;
    }
  },

  methods: {
    updateCareer(item = {}) {
      this.info.career = item;
    },
    clickCareer() {
      uni.navigateTo({
        url: "/pagesSub/companyCenter/interviewAI/interviewSearch",
      });
      // uni.navigateTo({
      //   url: "/pagesSub/companyCenter/interviewAI/interviewOption",
      // });
    },
    choiceQuestions() {
      if (
        !this.info.career.ylPositionId ||
        this.info.career.ylPositionId.length == 0
      ) {
        this.$u.toast("请选择面试职业");
        return;
      }

      let career = JSON.stringify(this.info.career);
      uni.navigateTo({
        url:
          "/pagesSub/companyCenter/interviewAI/interviewQuestionBank?career=" +
          career,
      });
    },
    handleNext() {
      console.log(
        "🚀 ~ file: interviewCreate.vue:101 ~ 创建面试-下一步 ~info:",
        this.info
      );
      if (!this.info.interviewTitle || this.info.interviewTitle.length == 0) {
        this.$u.toast("请填写面试标题");
        return;
      }
      if (!this.info.interviewTitle || this.info.interviewTitle.length > 30) {
        this.$u.toast("面试标题字数超出上限(30个字符)");
        return;
      }
      if (
        !this.info.career.ylPositionId ||
        this.info.career.ylPositionId.length == 0
      ) {
        this.$u.toast("请选择面试职业");
        return;
      }
      if (
        !this.info.questions.topicId ||
        this.info.questions.topicId.length == 0
      ) {
        this.$u.toast("请选择题库");
        return;
      }
      if (this.info.validStartTime.length <= 4) {
        this.$u.toast("请选择开始日期");
        return;
      }
      if (this.info.validEndTime.length <= 4) {
        this.$u.toast("请选择结束日期");
        return;
      }

      var a = this.info.validStartTimestamp;
      var b = this.info.validEndTimestamp;
      if (typeof a === "string") {
        a = parseInt(a);
      }
      if (typeof b === "string") {
        b = parseInt(b);
      }
      if (a >= b) {
        this.$u.toast("请选择正确的面试时间段");
        return;
      }

      /*
      // 进入选择题目页面
      let url = "/pagesSub/companyCenter/interviewAI/interviewChoice?info=" + JSON.stringify(this.info);
      if (this.isCopy) {
        url = url + '&isCopy=1';
      }
      uni.navigateTo({
        url: url,
      });
      */
      this.commitAction();
    },

    clickDateBegin() {
      this.beginPicker = 1;
      this.showPicker = true;
    },
    clickDateEnd() {
      this.beginPicker = 0;
      this.showPicker = true;
    },
    handleConfirm(e) {
      console.log("🚀 ~ file: interviewCreate.vue:122 ~ handleConfirm ~ e:", e);
      let date =
        e.year + "/" + e.month + "/" + e.day + " " + e.hour + ":" + e.minute;
      if (this.beginPicker == 1) {
        this.info.validStartTime = date;
        this.info.validStartTimestamp = e.timestamp;
      } else {
        this.info.validEndTime = date;
        this.info.validEndTimestamp = e.timestamp;
      }
    },

    // 完成创建

    commitAction() {
      const params = {
        companyId: this.companyId,
        userId: this.personId,
        interviewTitle: this.info.interviewTitle,
        ylPositionId: this.info.career.ylPositionId,
        validStartTime: this.info.validStartTime + ":00",
        validEndTime: this.info.validEndTime + ":00",
        questionIds: JSON.stringify(this.selectedItemIds),
        repoId: this.info.questions.topicId,
      };
      getCompanyInterviewCreate(params).then((res) => {
        console.log(
          "🚀 ~ file: interviewChoice.vue:279 ~ getCompanyInterviewIssuesDB ~ res:",
          res
        );
        if (res.code == 200) {
          uni.redirectTo({
            url: "/pagesSub/companyCenter/interviewAI/interviewNotes",
          });
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx 40rpx 40rpx;
  .font-bold {
    font-weight: bold;
    padding: 30rpx 0rpx 20rpx;
    font-size: 30rpx;
  }

  .tips {
    margin-top: 40rpx;
    color: #555;
  }

  .nextBtn {
    bottom: 40rpx;
    position: absolute;
  }
  .dateContent {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50rpx;
    text-align: center;
    .date {
      width: 45%;
      height: 50rpx;
      margin-bottom: 30rpx;
      color: rgb(207, 206, 206);
    }
    .dateOn {
      color: #555;
    }
    .line {
      width: 10%;
      height: 100%;
      text-align: center;
    }
  }

  .tool {
    height: 100rpx;
    position: absolute;
    bottom: 50rpx;
    left: 160rpx;
    right: 160rpx;
  }

  .labelText {
    height: 50rpx;
    width: 100%;
    margin-top: 20rpx;
    color: rgb(3, 3, 3);
  }
  .labelText-gray {
    height: 50rpx;
    width: 100%;
    margin-top: 20rpx;
    color: rgb(207, 206, 206);
  }
}
</style>
